<template>
  <div class="full-page">
    <van-nav-bar title="菜谱统计" left-arrow @click-left="onClickLeft" fixed />
    <div class="con">
      <h2 class="title">浏览数</h2>
      <div class="box1">
        <Echarts :x="x1" :y="y1"></Echarts>
      </div>
      <h2 class="title">收藏数</h2>
      <div class="box2">
        <Echarts :x="x2" :y="y2"></Echarts>
      </div>
    </div>
  </div>
</template>
        
<script>
import { NavBar } from "vant";
import Echarts from "./com/Echarts.vue";
import { getBrowse, getCollection } from "@/api/statistics";

export default {
  components: {
    [NavBar.name]: NavBar,
    Echarts,
  },
  data() {
    return {
      x1: ["22日", "23日", "24日", "25日", "26日", "27日", "28日"],
      y1: [150, 230, 224, 218, 135, 147, 490],
      x2: ["22日", "23日", "24日", "25日", "26日", "27日", "28日"],
      y2: [150, 230, 224, 218, 135, 147, 490],
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    // 获取浏览数据
    async browse() {
      let res = await getBrowse();
      this.x1 = res.data.data.x;
      this.y1 = res.data.data.y;
    },
    //获取收藏数据
    async collection() {
      let res = await getCollection();
      this.x2 = res.data.data.x;
      this.y2 = res.data.data.y;
    },
  },
  created() {
    this.browse();
    this.collection();
  },
};
</script>
        
<style scoped lang="scss">
.full-page {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 1;
  overflow: hidden;

  .con {
    padding: 0 5.3333vw;
    height: calc(100% - 50px);
    overflow: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .title {
      font-size: 6.6333vw;
      font-weight: 800;
      margin-top: 4vw;
    }
    .box1 {
      width: 90vw;
      height: 90vw;
      margin: 5.3333vw auto;
      border-radius: 4vw;
      box-shadow: 0 0 2.6667vw 0 #ccc;
    }
    .box2 {
      width: 90vw;
      height: 90vw;
      margin: 5.3333vw auto;
      box-shadow: 0 0 2.6667vw 0 #ccc;
    }
  }
}
</style>